<template>
	<view class="app-bill">
			<view class="content">
				<view class="tab-navs">
					<scroll-view class="scroll-term_H" scroll-x="true">
						<block v-for="(item,ind) in tabObjectList" :key="ind">
							<view class="scroll-term-item_H" :class="index == ind ?'act':''" @tap="changItem(item,ind)">
								{{item[1]}}
							</view>
						</block>
					</scroll-view>
				</view>
				<template v-if="lists.length > 0">
					<view class="list" >
						<block v-for="(item,index) in lists" :key="index" v-if="lists.length">
							<view class="list-item">
								<view class="list-item-i">
									<view class="item-t">
										<!-- <image src="../../static/imgs/purse-top-logo.png" mode=""></image> -->
										<view class="item-h">
											<text>{{item.time}}</text>
											<text>{{item.typeStr}}</text>
										</view>
									</view>
								</view>
								<view class="list-item-i">
									<text>{{item.num}}</text>
								</view>
							</view>
						</block>
					</view>
				</template>
				<template v-else>
					<view class="nodata">{{i18n.nodata}}</view>
				</template>
			</view>
			
		<load v-if="showLoad"></load>
	</view>
</template>

<script>
	import Load from "../../components/common/load.vue"
	import {fetch, showToast, pageback, pageto, forceUpdate, checkLogin} from '@/common/js/util.js'
	import {mapGetters} from 'vuex' 
	let timer;
	export default {
		computed:  {
			i18n() {
				return this.$t('message');
			},
			...mapGetters([
				'getRequestUrl',
				"getLoginInfo",
				'getTextArr',
				'getLangType', 
				'getLang'
			])
		},
		data() {
			return {
				showLoadings:false,
				index: 0,
				 tabObjectList: [],
				page:1,
				rows:10,
				incomeId:0,
				lists:[]
			}
		},
		onLoad(){
			this.page = 1;
			this.lists =[]
			this.getThings(this.page,this.rows);
		},
		onShow(){
			this.getList();
		},
		onPullDownRefresh() {
					//下拉刷新的时候请求一次数据
					// console.log('下拉了')
			this.page =1;
			this.lists =[]
		    this.getThings();
		},
		onReachBottom() {
			let _self = this
				//触底的时候请求数据，即为上拉加载更多
				//为了更加清楚的看到效果，添加了定时器
		    if (timer != null) {
		        clearTimeout(timer);
		    }
		    timer = setTimeout(function() {
		        _self.getThings();
		    }, 1000);
					
					// 正常应为:
					// _self.getmorenews();
		},
		methods: {
			back() {
				pageback()
			},
			changItem(e,i){
				this.index = i;
				this.page=1;
				this.lists =[]
				this.incomeId = e[0];
				this.getThings(this.page,this.rows);
			},
			objectChange(e){
				// console.log(e.tab.indexA);
				this.page=1;
				this.lists =[]
				this.incomeId = e.tab.indexA;
				this.getThings(this.page,this.rows);
			},
			getThings(page = 1, rows = this.rows){
				let url_ = this.getRequestUrl + "/api/User/detailed";
				let data_ ={
					id:this.getLoginInfo.id,
					token:this.getLoginInfo.token,
					type: this.incomeId,
					rows,
					page:this.page
				}
				// uni.showLoading()
				this.showLoadings = true;
				fetch(url_,data_,'POST').then(res=>{
					// console.log(res)
					// uni.hideLoading()
					this.showLoadings = false;
					this.tabObjectList = Object.entries(res.data.data.type)
					this.incomeId = this.tabObjectList[0][0]
					console.log(res.data.data.data.data.length);
					checkLogin(this.getLoginInfo,this.getRequestUrl);
					if(res.data.data.data.data.length ==0){
						showToast(this.i18n.nodata)
						uni.hideNavigationBarLoading();
						return;
					}
					if(res.data.code){
						if(this.page ==1){
							this.page ++;
							uni.stopPullDownRefresh();
							this.lists = res.data.data.data.data;
							console.log(res);
							this.lists.forEach((item,index)=>{
								this.lists[index].num = item.num
								// this.lists[index].pcs = _self.i18n.BlockPackage
							})
						}else{
							this.page ++;
							let lists = res.data.data.data.data;
							lists.forEach((item,index)=>{
								lists[index].num = item.num
								// lists[index].pcs = _self.i18n.BlockPackage
							})
							// this.day_sum = res.data.data.day_sum+"";
							this.lists = this.lists.concat(lists)
							// console.log(this.lists)
						}
					}else{
						uni.showToast(res.data.msg)
					}
				}).catch(err=>{
					// uni.hideLoading()
					this.showLoadings = false;
					uni.showToast(this.i18n.request_fail)
				})
			}
		},
		components: {
			Load
		}
	}
</script>

<style lang="scss">
	@import  '@/common/scss/variable.scss';
	@import  '@/common/scss/global.scss';
	page {
		background-color: #FFFFFF;
	}
	.app-bill {
		.content {
			.tab-navs{
				display: flex;
				border-bottom:2upx solid #efefef;
				font-size: 16px;
				padding-left: 5upx;
				// justify-content: space-between;
				
				.scroll-term-item_H {
					display: inline-block;
					box-sizing: border-box;
					margin-right: 30upx;
					padding:0 5upx;
					&.act{
						color: $theme-color;
						// border-bottom:6upx solid $theme-color;
						position: relative;
						&::after{
							content: '';
							width: 80upx;
							height: 6upx;
							background-color: $theme-color;
							position: absolute;
							left: 50%;
							bottom:0;
							transform: translate(-50%,0);
						}
					}
				}
				.scroll-term_H {
					white-space: nowrap;
					width: 100%;
					box-sizing: border-box;
					.fund-term-item-title{
						color: #FFFFFF;
						font-size: 26upx;
						font-weight: bold;
						margin-bottom: 34upx;
					}
					text{
						display: block;
						color: #FFFFFF;
						font-size:22upx;
					}
				}
				
				
				view{
					flex:1;
					text-align: center;
					line-height: 84upx;
					font-size: 12px;
					&.act{
						color: $theme-color;
						// border-bottom:6upx solid $theme-color;
						position: relative;
						&::after{
							content: '';
							width: 150upx;
							height: 6upx;
							background-color: $theme-color;
							position: absolute;
							left: 50%;
							bottom:0;
							transform: translate(-50%,0);
						}
					}
				}
			}
			.list{
				padding: 0 30upx;
				.list-item{
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 130upx;
					border-bottom:2upx solid #efefef;
					&:last-child{
						border-bottom:none;
					}
					.list-item-i{
						flex: 1;
						&:last-child{
							text-align: right;
						}
						text{
							font-size: 14px;
						}
						.item-t{
							overflow: hidden;
							display: flex;
							align-items: center;
							image{
								width: 48upx;
								height: 48upx;
								margin-right: 30upx;
							}
							.item-h{
								text{
									display: block;
									font-size: 12px;
									color: #a4a3a4;
									margin-bottom: 16upx;
									&:last-child{
										font-size: 14px;
										color: #000;
										font-weight: bold;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
